<template>
  <div class="sys-button" :class="type" @click="$emit('click')">
    <i v-if="icon" :class="'sys-button-icon ' + icon"></i>
    <span>
      <slot></slot>
    </span>
  </div>
</template>

<script>
export default {
  name: 'sys-button',
  cnName: '页面-工具栏按钮',
  props: {
    icon: String,
    type: String
  },
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
@mixin button-bgcolor($color) {
  background-color: $color;
  cursor: pointer;
  &:hover, &:focus {
    background-color: mix(#FFF, $color, 20%)
  }

  &:active {
    background-color: mix(#000, $color, 10%);
  }
}

.sys-button {
  height: 100%;
  cursor: pointer;
  font-size: 12px;
  padding: 8px 12px;
  position: relative;
  display: inline-block;
  border-left: 1px solid #ececec;
  border-right: 1px solid #ececec;
  color: #555;

  &:hover {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  }

  &-icon {
    margin-right: 8px;
  }

  + .sys-button {
    border-left: 0;
  }

  &.primary {
    color: #FFF;
    @include button-bgcolor(#1890ff)
  }

  &.success {
    color: #FFF;
    @include button-bgcolor(#13ce66)
  }

  &.warning {
    color: #FFF;
    @include button-bgcolor(#ffba00)
  }

  &.danger {
    color: #FFF;
    @include button-bgcolor(#ff4949)
  }
}
</style>
